import styles from "./index.module.less";
import classNames from "classnames";
import { memo, useEffect, useRef } from "react";
import { Button, Col, message, Row } from "antd";
import type { ProFormInstance } from "@ant-design/pro-form";
import { ProForm, ProFormText } from "@ant-design/pro-form";
import { LockOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { login } from "@/api/modules/user";
import { useRequest, useUpdateEffect } from "ahooks";
import { LoginStatus, SettingType } from "@/enums";
import useGetFakeCaptcha from "@/hooks/useGetFakeCaptcha";
import { HOME_URL } from "@/config/config";
import { useGlobalActionFunction } from "@/store/modules/global";
import { useAuthActionFunction } from "@/store/modules/auth";
import { RESULT_CODES } from "@/api/helper/ResultCode";
import { getProductStatusLabel } from "@/api/modules/product";

const Login = () => {
	const formRef = useRef<ProFormInstance>();
	const interval = useRef<any>();
	const navigate = useNavigate();
	const setToken = useGlobalActionFunction("setToken");
	const [setCurrentUser, setSettingMaps] = useAuthActionFunction(["setCurrentUser", "setSettingMaps"]);

	const {
		src,
		captchaToken,
		run: getFakeCaptchaRun
	} = useGetFakeCaptcha({
		onSuccess: (e: any) => {
			if (e && !interval.current) {
				interval.current = setInterval(() => {
					getFakeCaptchaRun().then();
				}, 60 * 1000);
			}
		}
	});

	const { loading, run } = useRequest(login, {
		manual: true,
		onSuccess: async (data, params) => {
			// 错误的情况
			if (false) {
				formRef.current?.setFields([
					{
						name: "password",
						value: params?.[0]?.password,
						errors: ["密码错误" as string]
					}
				]);
				return;
			}

			// 判断验证码错误的情况
			if (false) {
				formRef.current?.setFields([
					{
						name: "captcha",
						value: undefined,
						errors: [data?.msg as string]
					}
				]);
				getFakeCaptchaRun().then();
				return;
			}
			if (data.code === RESULT_CODES.SUCCESS) {
				// 想cookie中存储token
				setToken(data?.data?.token ?? "");

				setCurrentUser({
					userName: params?.[0]?.username
				});

				const goodsStatusLabels = await getProductStatusLabel();
				setSettingMaps({
					type: SettingType.GOODS_STATUS_LABEL,
					data: goodsStatusLabels?.data ?? []
				});

				message.success("登录成功");
				return navigate(HOME_URL);
			}
		}
	});

	//清除验证码定时器
	useEffect(() => {
		// 添加登录页面
		return () => {
			if (interval.current) {
				clearInterval(interval.current);
			}
		};
	}, []);

	/**
	 * 提交表单
	 */
	const onSubmit = (values: any) => {
		let data = {
			...values,
			captchaToken
		};

		run(data);
		return Promise.resolve(true);
	};

	return (
		<div className={styles.container}>
			<div className={styles.bg}>
				<div className={styles.login_container}>
					<div className={styles.title}>后台管理系统</div>
					<ProForm submitter={false} formRef={formRef} onFinish={onSubmit}>
						<>
							<ProFormText
								name="username"
								fieldProps={{
									size: "large"
								}}
								placeholder={"请输入登录账户"}
								rules={[
									{
										required: true,
										message: "请输入登录账户"
									}
								]}
							/>

							<ProFormText.Password
								name="password"
								fieldProps={{
									size: "large"
								}}
								placeholder={"请输入账户密码"}
								rules={[
									{
										required: true,
										message: "请输入账户密码"
									}
								]}
							/>
							{/* <Row gutter={10}>
							<Col span={12}>
								<ProFormText
									name="captcha"
									fieldProps={{
										size: "large",
										maxLength: 4
									}}
									placeholder={"请输入验证码"}
									rules={[
										{
											required: true,
											message: "请输入验证码"
										}
									]}
								/>
							</Col>
							<Col span={12}>
								<div className={styles.login_captcha} onClick={getFakeCaptchaRun}>
									<img src={src} alt="" />
								</div>
							</Col>
						</Row> */}
						</>

						<Button size="large" loading={loading} htmlType={"submit"} className={styles.button} type={"primary"}>
							登录
						</Button>
					</ProForm>
				</div>
			</div>
		</div>
	);
};
export default memo(Login);
